<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>4.1-响应式数据与副作用函数</title>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    /**
     * 副作用函数指的是会产生副作用的函数
     */ 

    // effect 函数的执行会直接或间接影响其他函数的执行，这时我们说effect 函数产生了副作用
    function effect() {
        document.body.innerText = 'hello vue3'
    }

    /**
     * 副作用很容易产生，例如一个函数修改了全局变量，这其实也是一个副作用
     * */ 
    // 全局变量
    let val = 1

    function effect() {
        val = 2 // 修改全局变量，产生副作用
    }


    /**
     * 什么是响应式数据
     * - 当值变化后，副作用函数自动重新执行，如果能实现这个目标，那么对象 obj 就是响应式数据
     * */ 
    const obj = { text: 'hello world' }
    function effect() {
        // effect 函数的执行会读取 obj.text
        document.body.innerText = obj.text
    }

    obj.text = 'hello vue3' // 修改 obj.text 的值，同时希望副作用函数会重新执行
    
</script>

</html>